<template>
	<div class="systemAboutPage">
		<div class="strategyMenus">
			<div class="strategyMenusBut">
				<div :class="tabIndexActiveIndex == 0 ? 'tabIndexActive' : ''" @click="tabIndexClick(0)">关于产品</div>
				<!-- 屏蔽licence产品许可 -->
				<div v-show="false" :class="tabIndexActiveIndex == 2 ? 'tabIndexActive' : ''" @click="tabIndexClick(2)">产品许可</div>
				<div v-show="baseInfo.isVisibleUG" :class="tabIndexActiveIndex == 1 ? 'tabIndexActive' : ''" @click="tabIndexClick(1)"> 操作手册</div>
				<div :class="tabIndexActiveIndex == 3 ? 'tabIndexActive' : ''" @click="tabIndexClick(3)">相关下载</div>
			</div>
		</div>
		<div class="PageContent" v-if="tabIndexActiveIndex == 0">
			<div class="PageContentBox">
				<div class="PageContentBoxTop">
					<div class="PageContentBoxTopTitle">产品名称</div>
					<div class="PageContentBoxTopLine"></div>
				</div>
				<div class="PageContentBoxBottom">
					<div class="PageContentBoxBottomTitle">{{ baseInfo.productName }}</div>
				</div>
			</div>
			<div class="PageContentBox">
				<div class="PageContentBoxTop">
					<div class="PageContentBoxTopTitle">产品版本</div>
					<div class="PageContentBoxTopLine"></div>
				</div>
				<div class="PageContentBoxBottom">
					<div class="PageContentBoxBottomRow">
						<span>版本类型</span>
						<span>{{ baseInfo.productVersion.versionType }}</span>
					</div>
					<div class="PageContentBoxBottomRow">
						<span>版本号</span>
						<span>{{ baseInfo.productVersion.versionNumber }}</span>
					</div>
				</div>
			</div>
			<div class="PageContentBox">
				<div class="PageContentBoxTop">
					<div class="PageContentBoxTopTitle">运营公司</div>
					<div class="PageContentBoxTopLine"></div>
				</div>
				<div class="PageContentBoxBottomIcon">
					<div class="PageContentBoxBottomIconLeft">
						<div class="PageContentBoxBottomRow">
							<span>公司名称</span>
							<span>{{ baseInfo.operatingCompany.companyName }}</span>
						</div>
						<div class="PageContentBoxBottomRow">
							<span>公司网站</span>
							<span>{{ baseInfo.operatingCompany.companyWebsite }}</span>
						</div>
						<div class="PageContentBoxBottomRow">
							<span>客户热线</span>
							<span>{{ baseInfo.operatingCompany.customerHotline }}</span>
						</div>
						<div class="PageContentBoxBottomRow">
							<span>联系地址</span>
							<span>{{ baseInfo.operatingCompany.contactAddress }}</span>
						</div>
						<!-- <div class="PageContentBoxBottomRow">
							<span>邮编</span>
							<span>{{ baseInfo.operatingCompany.postcode }}</span>
						</div> -->
					</div>
					<!-- logo区域 -->
					<!-- <div class="PageContentBoxBottomIconRight"></div> -->
				</div>
			</div>
		</div>
		<div class="PageContent" v-if="tabIndexActiveIndex == 2">
			<div class="PageContentBox">
				<div class="PageContentBoxTop">
					<div class="PageContentBoxTopTitle">许可信息</div>
					<div class="PageContentBoxTopLine"></div>
				</div>
				<div class="PageContentBoxBottomIcon">
					<div class="PageContentBoxBottomIconLeft">
						<div class="PageContentBoxBottomRow">
							<span>许可码</span>
							<span>{{ licenceInfo.serial }}</span>
						</div>
						<div class="PageContentBoxBottomRow">
							<span>许可数量 </span>
							<span>{{ licenceInfo.serial_resource }}</span>
						</div>
						<div class="PageContentBoxBottomRow">
							<span>许可天数</span>
							<span>{{ licenceInfo.serial_day }}</span>
						</div>
						<div class="PageContentBoxBottomRow">
							<span>许可开始时间</span>
							<span>{{ licenceInfo.serial_time | transitionTime }}</span>
						</div>
						<div class="PageContentBoxBottomRow">
							<span>许可剩余时间</span>
							<span>{{ licenceInfo.days_left + "天" }}</span>
						</div>
					</div>
					<!-- logo区域 -->
					<!-- <div class="PageContentBoxBottomIconRight"></div> -->
				</div>
			</div>
			<div class="PageContentBox">
				<div class="PageContentBoxTop">
					<div class="PageContentBoxTopTitle">许可文件</div>
					<div class="PageContentBoxTopLine"></div>
				</div>
				<div class="PageContentBoxBottomIcon">
					<div class="PageContentBoxBottomIconLeft">
						<div class="PageContentBoxBottomRow">
							<span>上传文件</span>
							<span class="fileUploadBox">
								<el-upload
									ref="licenceUpload"
									class="upload-demo"
									:action="actionStr"
									multiple
									:limit="1"
									:show-file-list="false"
									:on-change="fileChange"
									:on-progress="fileProgress"
								>
									<wj-Button type="primary" @click="clearUploadFiles">选择文件</wj-Button>
								</el-upload>
							</span>
						</div>
						<div class="PageContentBoxBottomRow">
							<span>文件名称</span>
							<span>{{ fileText }}</span>
						</div>
						<div class="PageContentBoxBottomRow">
							<span>上传进度</span>
							<span>{{ loadProgress < 100 ? loadProgress + "%，正在上传文件" : loadProgress + "%，文件上传完成" }}</span>
						</div>
						<div class="PageContentBoxBottomRow">
							<span>许可验证</span>
							<span class="fileUploadBox">
								<wj-Button type="middlestate" @click="submitLicence">提交</wj-Button>
							</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="PageContent" v-if="tabIndexActiveIndex == 3">
			<div class="PageContentBox">
				<div class="PageContentBoxTop">
					<div class="PageContentBoxTopTitle">控件下载</div>
					<div class="PageContentBoxTopLine"></div>
				</div>
				<div class="PageContentBoxBottomIcon">
					<div class="PageContentBoxBottomIconLeft">
						<div class="PageContentBoxBottomRow">
							<span>灯光控件</span>
							<span class="fileUploadBox">
								<div class="exeName">LightWarning_Setup.exe</div>
								<wj-Button type="highstate" @click="control_exe_download">下载</wj-Button>
							</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import httpUrl from "@/utils/request/httpUrl";
import {licence_getLicenseInfo, licence_file, system_light_download, system_companyInfo} from "@/utils/request/api";
export default {
	name: "SystemAbout",
	data() {
		return {
			// oem信息
			baseInfo: {},
			// tab切换
			tabIndexActiveIndex: 0,
			// 许可信息
			licenceInfo: {
				serial: "",
				serial_resource: "",
				serial_day: "",
				serial_time: "",
				days_left: "",
			},
			fileText: "------", // 文件上传  文件名
			loadProgress: 0, // 上传进度百分比
			actionStr:
				process.env.NODE_ENV == "development"
					? httpUrl.devUrl + "/uploadLicenseFile"
					: process.env.NODE_ENV == "production"
					? httpUrl.prodUrl + "/uploadLicenseFile"
					: "",
			licenceCode: "------", // 本机注册码
			submitStatusAndFile: {
				submitStatus: false, // 是否已经100%
				file: null, // 文件列表中的文件
			},
		};
	},
	created() {},
	mounted() {
    system_companyInfo().then(res => {
      if (res.code === 200) {
        this.baseInfo = res.data;
      } else {
        this.$msg.error(res.data);
      }
    });
	},
	//过滤器
	filters: {
		// 时间戳转年月日时分秒
		transitionTime(value) {
			var date = new Date(value);
			var Y = date.getFullYear() + "-";
			var M = (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "-";
			var D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";

			var h = (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
			var m = (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) + ":";
			var s = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
			var strDate = Y + M + D + h + m + s;
			console.log("输出内容:", strDate);
			return strDate;
		},
	},
	methods: {
		// tab切换
		tabIndexClick(index) {
			this.tabIndexActiveIndex = index;
			if (index == 1) {
				window.open("https://" + window.location.host + "/downloadLocal/操作手册.pdf", "_blank");
			}
		},
		// 获取许可信息
		getLicenceInfo() {
			licence_getLicenseInfo().then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.licenceInfo = res.data;
				} else {
					this.$msg.error("许可信息获取失败！");
				}
			});
		},
		// 文件上传  清空文件列表
		clearUploadFiles() {
			this.$refs.licenceUpload.clearFiles();
		},
		// 文件上传  进度条
		fileProgress(event, file, fileList) {
			console.log(event);
			console.log(file);
			console.log(fileList);
			this.loadProgress = parseInt(event.percent);
		},
		// 文件上传  文件发生改变
		fileChange(file, fileList) {
			console.log(file);
			console.log(fileList);
			this.fileText = file.name;
			if (file.status == "success" && file.percentage == 100) {
				this.$msg.success("文件已上传列表，请进行授权操作！");
				this.submitStatusAndFile.submitStatus = true;
				this.submitStatusAndFile.file = file;
			}
		},
		// 文件上传  接口调用
		uploadLicenceFile(file) {
			console.log(file);
			licence_file({
				file: file.raw,
			}).then((res) => {
				console.log(res);
				if (res.code == 200) {
					this.$msg.success("Licence授权验证成功，请继续操作！");
					location.reload();
				} else {
					this.$msg.error("Licence授权验证失败，请重新获取授权文件！");
				}
			});
		},
		// 提交
		submitLicence() {
			if (this.submitStatusAndFile.submitStatus) {
				this.uploadLicenceFile(this.submitStatusAndFile.file);
			} else {
				this.$msg.warning("Licence文件正在上传，请稍等！");
			}
		},
		// 控件下载
		control_exe_download() {
			this.$showLoading.show("正在下载灯光控件，请稍后...", true, 60000);
			system_light_download({}).then((res) => {
				console.log(res);
				if (res != undefined && res != null) {
					this.$showLoading.hide(false);
					this.$msg.success("灯光控件下载成功！");
					this.actualDownload(res);
				} else {
					this.$showLoading.hide(false);
					this.$msg.error("灯光控件下载失败！");
				}
			});
		},
		// 实际下载
		actualDownload(res) {
			let content = res.data;
			let blob = new Blob([content], { type: "application/vnd.ms-excel;charset=UTF-8" });
			let fileName = decodeURI(res.headers["content-disposition"].split(";")[1].split("=")[1]); //自定义下载文件的名字
			if ("download" in document.createElement("a")) {
				// 非IE下载
				let elink = document.createElement("a");
				elink.download = fileName;
				elink.style.display = "none";
				elink.href = URL.createObjectURL(blob);
				document.body.appendChild(elink);
				elink.click();
				URL.revokeObjectURL(elink.href); // 释放URL 对象
				document.body.removeChild(elink);
			} else {
				// IE10+下载
				navigator.msSaveBlob(blob, fileName);
			}
		},
	},
};
</script>
<style lang="less" scoped>
.systemAboutPage {
	width: 100%;
	height: 100%;
	padding: 12px 20px;
	box-sizing: border-box;
	background: #ffffff;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	.strategyMenus {
		width: 100%;
		height: 48px;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		.strategyMenusBut {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			div {
				width: 120px;
				height: 36px;
				margin-right: 18px;
				font-size: 18px;
				line-height: 36px;
				background: #ffffff;
				text-align: center;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
			}
			div:hover {
				cursor: pointer;
			}
			div.tabIndexActive {
				border-bottom: 2px solid #82b808;
				color: #82b808;
			}
		}
	}
	.PageContent {
		width: 100%;
		height: calc(100% - 48px);
		padding: 18px 0;
		box-sizing: border-box;
		.PageContentBox {
			width: 90%;
			margin: 0 auto;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;
			.PageContentBoxTop {
				width: 100%;
				height: 42px;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				.PageContentBoxTopTitle {
					width: 10%;
					height: 42px;
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					font-size: 18px;
					font-weight: 600;
					color: #7f7f7f;
				}
				.PageContentBoxTopLine {
					width: 90%;
					height: 1px;
					background: #e2e2e2;
				}
			}
			.PageContentBoxBottom {
				width: 78%;
				margin: 12px auto;
				.PageContentBoxBottomTitle {
					font-size: 24px;
					font-weight: 600;
					color: #7f7f7f;
				}
				.PageContentBoxBottomRow {
					width: 100%;
					margin-bottom: 12px;
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
					span {
						font-size: 16px;
						color: #929292;
						height: 32px;
						line-height: 32px;
					}
					span:first-child {
						width: 108px;
						margin-right: 48px;
					}
					span:last-child {
						flex: 1;
						margin-right: 12px;
					}
				}
				.PageContentBoxBottomRow:last-child {
					margin-bottom: 0;
				}
			}
			.PageContentBoxBottomIcon {
				width: 78%;
				height: 216px;
				margin: 12px auto;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				.PageContentBoxBottomIconLeft {
					width: 60%;
					height: 100%;
					.PageContentBoxBottomRow {
						width: 100%;
						margin-bottom: 12px;
						display: flex;
						flex-direction: row;
						justify-content: flex-start;
						align-items: center;
						span {
							font-size: 16px;
							color: #929292;
							height: 32px;
							line-height: 32px;
						}
						span:first-child {
							width: 108px;
							margin-right: 48px;
						}
						span:last-child {
							flex: 1;
							margin-right: 12px;
						}
						span.fileUploadBox {
							height: 32px;
							line-height: 32px;
							display: flex;
							flex-direction: row;
							justify-content: flex-start;
							align-items: center;
							.exeName {
								margin-right: 18px;
							}
							[class*="wj-button-"] {
								font-size: 14px;
								padding: 8px 18px;
							}
						}
					}
					.PageContentBoxBottomRow:last-child {
						margin-bottom: 0;
					}
				}
				.PageContentBoxBottomIconRight {
					width: 40%;
					height: 100%;
					background: peachpuff;
				}
			}
		}
	}
}
</style>
